<!DOCTYPE html>
<html lang="zh_CN" style="font-size: 100px">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>log</title>
    <link rel="stylesheet" href="/public/css/reset.css" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <link rel="stylesheet" href="/public/css/animate.min.css" />
    <style>
      #access {
        box-sizing: border-box;
        width: 100%;
        max-width: 12rem;
        min-width: 9.6rem;
        margin: 0 auto;
        box-sizing: border-box;
        /* padding: 0 0.36rem; */
      }
    </style>
  </head>
  <body>
    <div id="access">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 访问日志 -->
        <el-tab-pane label="访问日志" name="access">
          <div class="table-box">
            <el-table
              :data="accessList"
              height="550"
              border
              style="width: 100%"
              :default-sort="{prop: 'time', order: 'descending'}"
            >
              <el-table-column prop="ip" label="ip"> </el-table-column>
              <el-table-column prop="location" label="归属地"> </el-table-column>
              <el-table-column prop="protocol" label="协议"> </el-table-column>
              <el-table-column prop="path" label="url"> </el-table-column>
              <el-table-column sortable prop="time" label="访问时间">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <!-- 上传日志 -->
        <el-tab-pane label="上传日志" name="upload">
          <div class="table-box">
            <el-table
              :data="accessList"
              height="350"
              border
              style="width: 100%"
              :default-sort="{prop: 'time', order: 'descending'}"
            >
              <el-table-column prop="ip" label="ip"> </el-table-column>
              <el-table-column sortable prop="time" label="上传时间">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </body>
  <script src="/public/lib/vue/vue.min.js"></script>
  <script src="/public/lib/element-ui/elementui.js"></script>
  <script src="/public/lib/axios/axios.min.js"></script>
  <script src="/public/js/tool.js"></script>
  <script>
    let app = new Vue({
      el: "#access",
      data: {
        accessList: [],
        activeName: "access",
      },

      created() {
        this.init();
      },

      mounted() {},

      methods: {
        async init() {
          let ret = await myPost("/getaccess");
          console.log(ret.data);
          this.accessList = ret.data.access;
        },
        async handleClick(tab, event) {
          console.log(tab.index);
          if (tab.index == 1) {
            let ret = await myPost("/getupload");
            console.log(ret.data);
            this.accessList = ret.data.record;
          }else{
            let ret = await myPost("/getaccess");
            console.log(ret.data);
            this.accessList = ret.data.access;
          }
        },
      },
    });
  </script>
</html>
